import * as React from 'react'
import { Layout, Row, Col, Icon, Badge, Menu, Dropdown, Avatar, Popover } from 'antd'
import { Link, withRouter } from 'react-router-dom'
import { fromBadjs } from '../../common/api';
import './index.less';
import { loginCtx } from '../QQLogin';

const { Header } = Layout;

function handleLogOut() {
    fromBadjs.post('/api/users/logout', {}).then(res => {
        location.reload();
    }).catch(res => {
        location.reload();
    });
}

function commonHeader(props) {
    const { profile = {} } = props;
    let username = profile.user ? profile.user.name : '';
    const menu = (
        <Menu>
            <Menu.Item>
                <a onClick={handleLogOut}>注销</a>
            </Menu.Item>
            <Menu.Item>
                <a target="_blank" href="https://git.code.oa.com/aegis/issue/issues">意见反馈</a>
            </Menu.Item>
            <Menu.Item>
                <a href={'mailto:2580575484@qq.com'}>联系我们</a>
            </Menu.Item>
        </Menu>
    );


    return (
        <Header className="cm-header">
                <Icon
                    type={props.collapsed ? 'menu-unfold' : 'menu-fold'}
                    style={{
                        fontSize: '20px',
                        position: 'absolute',
                        top: '22px'
                    }}
                    className="trigger"
                    onClick={props.handlerToggle}
                />
            <Row type="flex" justify="end" align="middle">
                <Col>
                    <loginCtx.Consumer>{({ userInfo }) => (
                        <div style={{ margin: '0 15px' }} className="item">
                            {
                                userInfo ? `👏 欢迎, ${userInfo.role === 1 ? '管理员' : ''} ${userInfo.loginName}` : '未登陆'
                            }
                        </div>
                    )}</loginCtx.Consumer>
                </Col>
                <Col span={3}>
                    <loginCtx.Consumer>{({ userInfo }) => (
                        <Dropdown overlay={menu}>
                            <a className="ant-dropdown-link" href="javascript:void(0)">
                                <Avatar style={{ verticalAlign: 'middle' }} icon="user"
                                    src={userInfo && userInfo.avatar ? userInfo.avatar.replace('http', 'https') || '' : ''}>{username}</Avatar>
                            </a>
                        </Dropdown>
                    )}</loginCtx.Consumer>
                </Col>
            </Row>
        </Header>
    )
}

export default withRouter(commonHeader);
